<template>
    <div class="rating" v-if="rating">
        <!-- {{rating}} -->
        <template v-if="!full">
            <span>暂无评分</span>
        </template>
        <template v-else>
            <span class="star-full" v-for="(n, index) in full" :key="'0'+index"></span>
            <span class="star-half" v-for="(n, index) in half" :key="'1'+index"></span>
            <span class="star-gray" v-for="(n, index) in gray" :key="'2'+index"></span>
            <span class="average">{{rating.average}}</span>
        </template>
        <slot name="ratingsCount"></slot>
    </div>
</template>

<script>
export default {
    name: 'rating',
    props: {
        rating: {
            type: Object,
            required: true
        }
    },
    data(){
        return {
            full: 0,
            half: 0,
            gray: 0
        }
    },
    created () {
        let average = this.rating.average; //平均分
        this.full = parseInt(average / 2); //全星
        this.half = average % 2 == 0 ? 0 : 1; //半星
        this.gray = 5 - this.full - this.half; //无星 
    }
}
</script>

<style lang="scss" scoped>
    .rating {
        margin-top:0.4rem;
        font-size: 1.4rem;
        color: #aaa;
        .star-full {
            width: 1.3rem;
            height: 1.3rem;
            background-image: url();
            display: inline-block;
            background-size: 1.3rem 1.3rem;
        }
        .star-gray {
            display: inline-block;
            width: 1.3rem;
            height: 1.3rem;
            background-image: url();
            background-size: 1.3rem 1.3rem;
        }
        .star-half {
            width: 1.3rem;
            height: 1.3rem;
            background-image: url();
            display: inline-block;
            background-size: 1.3rem 1.3rem;
        }
    }
</style>
